
    import { 
        getMenuPageList,
        getMenuDetail,
        addMenu,
        delMenu,
        modifyMenu,
        getMenuTreeSelectList
    } from '@/api/dev/base/menu.js';
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import IconSelect from '@/components/IconSelect'

    export default {
        name: "menu",
        components: { Treeselect,IconSelect },
        data() {
            return {
                labelWidth: "100px",
                formLabelWidth:"100px",
                // 选中menuId数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    sort: undefined,
                    sortType: undefined,
                },
                menuTreeFormOptions: undefined,           
                treeFilterKeywords:undefined,
                menuTreeOptions:undefined,
                defaultTreeProps: {
                    children: 'children',
                    label: 'label',
                },
                noOptionsText: '暂无数据',
                noChildrenText: '暂无子项',
                noResultsText: '未找到匹配项',
                loadingText: '数据加载中...',
                // 弹出层标题
                title: "",
                // 操作类型 1、add 2、edit
                opertype: 0,
                // 是否显示弹出层
                open: false,
                // 表单参数
                form: {},
                columns: [
                    { index: 0, key: 'menuId', label: `菜单ID`, checked:  true  },
                    { index: 1, key: 'parentId', label: `上级菜单`, checked:  true  },
                    { index: 2, key: 'paMenuName', label: `上级`, checked:  true  },
                    { index: 3, key: 'menuType', label: `类型`, checked:  true  },
                    { index: 4, key: 'menuName', label: `菜单名称`, checked:  true  },
                    { index: 5, key: 'orderNum', label: `显示顺序`, checked:  true  },
                    { index: 6, key: 'query', label: `路由参数`, checked:  true  },
                    { index: 7, key: 'visible', label: `显示状态（0显示 1隐藏）`, checked:  true  },
                    { index: 8, key: 'isFrame', label: `是否外链`, checked:  true  },
                    { index: 9, key: 'path', label: `路由地址`, checked:  false  },
                    { index: 10, key: 'component', label: `组件路径`, checked:  false  },
                    { index: 11, key: 'status', label: `菜单状态`, checked:  false  },
                    { index: 12, key: 'perms', label: `权限字符串`, checked:  false  },
                    { index: 13, key: 'menunameKey', label: `菜单名key`, checked:  false  },
                    { index: 14, key: 'routeName', label: `路由名`, checked:  false  },
                ],
                // 类型选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
                menu_type: [],
                // 是否外链选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
                yes_no: [],
                // 菜单状态选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
                sys_show_hide: [],
                dataList: [],
                total: 0,
                rules: {
                    parentId: [{ required: true, message: "上级菜单不能为空", trigger: "blur" }],
                    menuType: [{ required: true, message: "类型不能为空", trigger: "change" }],
                    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
                    orderNum: [{ required: true, message: "显示顺序不能为空", trigger: "blur" }],
                    icon: [{ required: true, message: "图标不能为空", trigger: "blur" }],
                    status: [{ required: true, message: "菜单状态不能为空", trigger: "change" }],
                },
            };
        },
        watch: {
            // 根据名称筛选树结点
            treeFilterKeywords(val) {
                this.$refs.tree.filter(val)
            },
        },
        created() {
            this.getMenuTreeSelectList()
            this.menuFormTreeOptionsQuery()
            // 列表数据查询
            this.getList();
            var dictParams = [
                "menu_type",
                "yes_no",
                "yes_no",
                "sys_show_hide",
            ];
            this.getDicts(dictParams).then((response) => {
                response.data.forEach((element) => {
                    this[element.dictType] = element.list;
                });
            });
        },
        methods: {
            iconIconSelected(name) {
                this.form.icon = name
            },
            normalizer(node) {
                return {
                    id: node.id,
                    label: node.label,
                    children: node.children,
                    isDisabled: node.isDisabled==true || node.isDisabled=='True'
                };
            },
            menuFormTreeOptionsQuery(){
                getMenuTreeSelectList({RootNodeName:'根结点',OnlyLevel1Node:false}).then((response) => {
                    this.menuTreeFormOptions = response.data
                })
            },
            getMenuTreeSelectList() {
                getMenuTreeSelectList({OnlyLevel1Node:false}).then((response) => {
                    this.menuTreeOptions = response.data
                })
            },
            // 节点单击事件
            handleNodeClick(data) {
                this.queryParams.treeNodeId = data.id
                this.queryParams.isDefaultNodeType=data.isDefaultNodeType
                this.getList()
            },
            // 筛选节点
            filterNode(value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            },
            // 查询数据
            getList() {
                this.loading = true;
                getMenuPageList(this.queryParams).then(res => {
                    if (res.code == 200) {
                        this.dataList = res.data.result;
                        this.total = res.data.totalNum;
                        this.loading = false;
                    }
                })
            },

            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 重置数据表单
            reset() {
                this.form = {
                    menuId: undefined,
                    parentId: undefined,
                    menuType: undefined,
                    menuName: undefined,
                    orderNum: undefined,
                    icon: undefined,
                    query: undefined,
                    visible: undefined,
                    isFrame: undefined,
                    path: undefined,
                    component: undefined,
                    status: undefined,
                    perms: undefined,
                    menunameKey: undefined,
                    routeName: undefined,
                    remark: undefined,
                };
                this.resetForm("form");
            },
            // 重置查询操作
            resetQuery() {
                this.timeRange = [];
                this.resetForm("queryForm");
                this.queryParams.treeNodeId=undefined;
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                    this.ids = selection.map((item) => item.menuId);
                    this.single = selection.length != 1
                    this.multiple = !selection.length;
            },
            // 自定义排序
            sortChange(column) {
                    if (column.prop == null || column.order == null) {
                        this.queryParams.sort = undefined;
                        this.queryParams.sortType = undefined;
                    } else {
                        this.queryParams.sort = column.prop;
                        this.queryParams.sortType = column.order;
                    }

                    this.handleQuery();
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加";
                this.opertype = 1;
                this.form.parentId=this.queryParams.treeNodeId||0;
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                    const Ids = row.menuId || this.ids;
                    var confirmTip='确认要删除数据项吗？';
                    if(row.dataName)
                    {
                            confirmTip='确认要删除数据项吗？';
                    }
                    this.$confirm(confirmTip)
                    .then(function () {
                        return delMenu({"Ids":Ids+''});
                    })
                    .then(() => {
                        this.handleQuery();
                        this.getMenuTreeSelectList();
                        this.msgSuccess("删除成功");
                    })
                    .catch(() => {});
            },

            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.menuId || this.ids;
                getMenuDetail(id).then((res) => {
                        const { code, data } = res;
                        if (code == 200) {
                                this.open = true;
                                this.title = "修改数据";
                                this.opertype = 2;
                                this.form = {
                                    ...data,
                                };
                        }
                    });
                },


                /** 提交按钮 */
                submitForm: function () {
                    this.$refs["form"].validate((valid) => {
                        if (valid) {
                            if (this.form.menuId != undefined && this.opertype === 2) {
                                modifyMenu(this.form)
                                    .then((res) => {
                                        this.msgSuccess("修改成功");
                                        this.open = false;
                                        this.getList();
                                        this.getMenuTreeSelectList();
                                    })
                            }
                            else {
                                addMenu(this.form)
                                    .then((res) => {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                    this.getMenuTreeSelectList();
                                })
                            }
                        }
                    });
                },

    },
};